<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>

<nav class="col-md-2 d-none d-md-block bg-light sidebar">
    <div class="sidebar-sticky">
        <ul id="navul" class="nav flex-column">
            <li class="nav-item">
                <a id="dashboardMenu" class="nav-link " href="${pageContext.request.contextPath}/dashboard.jsp">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                    Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
<%--            <li class="nav-item">--%>
<%--                <div id="accordion" class="panel-group">--%>
<%--                    <!-- 子模块的标题 -->--%>
<%--                    <a id="equipmentMenu" class="nav-link" data-toggle="collapse" href="#collapseThree" data-parent="#accordion">--%>
<%--                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">--%>
<%--                            <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>--%>
<%--                            <polyline points="2 17 12 22 22 17"></polyline>--%>
<%--                            <polyline points="2 12 12 17 22 12"></polyline>--%>
<%--                        </svg>--%>
<%--                        设备报修管理--%>
<%--                    </a>--%>
<%--                    <!-- 收缩div -->--%>
<%--                    <div id = "collapseThree" class="panel-collapse">--%>
<%--                        <div class="panel-body">--%>
<%--                            <a id="maintanceSubMenu" class="dropdown-item" href="${pageContext.request.contextPath}/equipment/maintenanceList.jsp">--%>
<%--                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>--%>
<%--                                设备报修--%>
<%--                            </a>--%>
<%--                            <a id="assignSubMenu" class="dropdown-item" href="${pageContext.request.contextPath}/equipment/assignList.jsp">--%>
<%--                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>--%>
<%--                                报修分派--%>
<%--                            </a>--%>
<%--                            <a id="fixSubMenu"class="dropdown-item" href="${pageContext.request.contextPath}/equipment/fixList.jsp">--%>
<%--                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>--%>
<%--                                维修管理--%>
<%--                            </a>--%>
<%--                            <a id="equipmentSubMenu" class="dropdown-item" href="${pageContext.request.contextPath}/equipment/equipmentList.jsp">--%>
<%--                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>--%>
<%--                                设备管理--%>
<%--                            </a>--%>
<%--                            <a id="areaSubMenu" class="dropdown-item" href="${pageContext.request.contextPath}/equipment/areaList.jsp">--%>
<%--                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>--%>
<%--                                区域管理--%>
<%--                            </a>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>

<%--            </li>--%>
<%--            <li class="nav-item">--%>
<%--                <div id="systemmgr" class="panel-group">--%>
<%--                    <a id="systemMenu" class="nav-link" data-toggle="collapse" data-parent="#systemmgr"--%>
<%--                       href="#collapseThree2">--%>
<%--                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"--%>
<%--                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"--%>
<%--                             stroke-linejoin="round" class="feather feather-users">--%>
<%--                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>--%>
<%--                            <circle cx="9" cy="7" r="4"></circle>--%>
<%--                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>--%>
<%--                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>--%>
<%--                        </svg>--%>
<%--                        系统管理--%>
<%--                    </a>--%>

<%--                    <div id="collapseThree2" class="panel-collapse collapse">--%>
<%--                        <div class="panel-body">--%>
<%--                            <a id="userSubMenu"  class="dropdown-item" href="${pageContext.request.contextPath}/system/userList.jsp">--%>
<%--                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">--%>
<%--                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>--%>
<%--                                    <polyline points="14 2 14 8 20 8"></polyline>--%>
<%--                                    <line x1="16" y1="13" x2="8" y2="13"></line>--%>
<%--                                    <line x1="16" y1="17" x2="8" y2="17"></line>--%>
<%--                                    <polyline points="10 9 9 9 8 9"></polyline>--%>
<%--                                </svg>--%>
<%--                                用户管理</a>--%>
<%--                            <a id="roleSubMenu" class="dropdown-item" href="${pageContext.request.contextPath}/system/roleList.jsp">--%>
<%--                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">--%>
<%--                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>--%>
<%--                                    <polyline points="14 2 14 8 20 8"></polyline>--%>
<%--                                    <line x1="16" y1="13" x2="8" y2="13"></line>--%>
<%--                                    <line x1="16" y1="17" x2="8" y2="17"></line>--%>
<%--                                    <polyline points="10 9 9 9 8 9"></polyline>--%>
<%--                                </svg>--%>
<%--                                角色管理</a>--%>
<%--                            <a id="permissionSubMenu" class="dropdown-item" href="${pageContext.request.contextPath}/system/permissionList.jsp">--%>
<%--                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">--%>
<%--                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>--%>
<%--                                    <polyline points="14 2 14 8 20 8"></polyline>--%>
<%--                                    <line x1="16" y1="13" x2="8" y2="13"></line>--%>
<%--                                    <line x1="16" y1="17" x2="8" y2="17"></line>--%>
<%--                                    <polyline points="10 9 9 9 8 9"></polyline>--%>
<%--                                </svg>--%>
<%--                                权限管理</a>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </li>--%>

        </ul>
    </div>
</nav>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

<script>
    var $jq = jQuery.noConflict();

    // 通过jsp获取session中存在的登陆用户的id，赋值给js变量userid
    var userid = '${sessionScope.loginUserId}'
    console.log('loginuserid:'+userid)
    console.log('sidebar page ready()')
    // 当页面加载完成后，立刻执行一个匿名函数
    $jq(document).ready(function () {
    // 发起 jquery.ajax()异步请求
        $jq.ajax({
            url: '${pageContext.request.contextPath}/api/servlet/permission/menubyuserid',
            data:{"userid":userid},
            method:"post",
            dataType:"json",
            success: function(result){
                // 生成菜单
                genMenu(result);
                // 菜单的高亮显示处理
                activeMenu();
            },
            timeout:1000,
            error: function(error){
                alert("服务器请求失败!【"+error +"】")
            }
        });
    });

    // 根据提供的json数组数据，生成动态菜单
    function genMenu(menuArray) {
        var linode = '<li class="nav-item"></li>';
        // 对数组数据，进行过滤，按权限类型==='D' 过滤，生成一个新的数组
        var mArray = menuArray.filter(item => item.permissiontype === 'D');
        for(var mArrayInex in mArray){// 变量主菜单（type=D 的菜单）
            $jq('.nav').append(linode);
            console.log("===for1==")
            // 按索引获取数组中对应的数据项
            var mArrayItem = mArray[mArrayInex];

            // 根据主菜单(type=D) 来进一步的查找 子菜单（parent_id = ?),生成一个新的数组
            var subMArray = menuArray.filter(item => item.parent_id === mArrayItem.permissionid);

            var panelGroupDiv = '<div id="accordion" class="panel-group"></div>'

            // 通过jquery的选择器，找到 class=nav 的元素 下的 li子元素，同时满足是最后一个子元素的条件
            $('.nav >li:last-child').append(panelGroupDiv)

            var nav_linkTag = '<a id="'+mArrayItem.menuno+'" class="nav-link" data-toggle="collapse" href="#collapseThree" data-parent="#accordion">\n' +
                '                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">\n' +
                '                            <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>\n' +
                '                            <polyline points="2 17 12 22 22 17"></polyline>\n' +
                '                            <polyline points="2 12 12 17 22 12"></polyline>\n' +
                '                        </svg>\n' +
                mArrayItem.permissionname +
                '                    </a>'
            $jq('.nav >li:last-child > div#accordion').append(nav_linkTag)

            var panel_bodyTag = ' <div id = "collapseThree" class="panel-collapse collapse">\n' +
                '                        <div class="panel-body"></div></div>';

            $jq('.nav >li:last-child > div#accordion').append(panel_bodyTag)

            // 遍历子菜单 type = M
            for(var subMArrayItemIndex in subMArray){

                var subMArrayItem = subMArray[subMArrayItemIndex];
                console.log("==>"+subMArrayItem.url)
                // 拼接 有效的 菜单的url地址
                var itemurl = '${pageContext.request.contextPath}'+"/"+subMArrayItem.url;

                var subMenuTag = '<a id="'+subMArrayItem.menuno+'" class="dropdown-item" href="'+itemurl+'">\n' +
                    '                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>\n' +
                    subMArrayItem.permissionname +
                    '                            </a>'
                $jq('.nav >li:last-child div.panel-body').append(subMenuTag)
            }
        }
        console.log($('.nav').html())
    }

    // 高亮显示处理
    function activeMenu() {
        // 从调用sidebar.jsp页面的传递过来
        var menu ='<%=request.getParameter("menuId")%>'
        var subMenu = '<%=request.getParameter("subMenuId")%>'

        console.log(menu)
        console.log(subMenu)

        // 初始加载菜单，需要将所有的高亮显示移除
        $jq('a.nav-link').removeClass("active")
        $jq('a.dropdown-item').removeClass("active")

        // 按照用户传递的主菜单id和子菜单id，进行高亮显示
        $jq(menu).addClass("active")
        $jq(subMenu).addClass("active")

        // 通过jquery找到子菜单，然后再找到父元素，然后再找到父元素，添加class show
        $jq(subMenu).parent().parent().addClass("show")
    }


</script>
